<template>
  <div>
    <div class="form1">
      <div class="title1">
        <div>
          箱信息
        </div>
      </div>
      <el-form ref="form"
               :model="box"
               inline
               label-width="90px"
               size="small"
               :rules="rules">
        <el-form-item label="箱号"
                      prop="cntrno">
          <el-input v-model="box.cntrno"
                    placeholder="请输入箱号"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="箱型尺寸"
                      prop="cszCsizecd">
          <el-select v-model="sizeType"
                     placeholder="请选择"
                     clearable
                     @change="changeCszCsizecd">
            <el-option v-for="item in cszCsizecdList"
                       :key="item.id"
                       :label="item.containerType+'/'+item.containerSize"
                       :value="[item.containerType,item.containerSize]"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="空重（吨）"
                      prop="cstatus">
          <el-select v-model="box.cstatus"
                     placeholder="请选择"
                     clearable>
            <el-option label="空"
                       value="E"></el-option>
            <el-option label="重"
                       value="F"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="type=='E'"
                      label="箱货总重（吨）"
                      prop="cweight">
          <el-input v-model="box.cweight"
                    placeholder="请输入箱货总重（吨）"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="铅封号"
                      prop="sealno">
          <el-input v-model="box.sealno"
                    placeholder="请输入铅封号"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="装货港"
                      prop="potLdport">
          <el-select v-model="box.potLdport"
                     placeholder="请选择"
                     clearable
                     filterable>
            <el-option v-for="item in portList"
                       :key="item.id"
                       :label="item.portcd+'/'+item.portlocnnm"
                       :value="item.portcd"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卸货港"
                      prop="potUnldport">
          <el-select v-model="box.potUnldport"
                     placeholder="请选择"
                     clearable
                     filterable>
            <el-option v-for="item in portList"
                       :key="item.id"
                       :label="item.portcd+'/'+item.portlocnnm"
                       :value="item.portcd"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目的港"
                      prop="potDstnport">
          <el-select v-model="box.potDstnport"
                     placeholder="请选择"
                     clearable
                     filterable>
            <el-option v-for="item in portList"
                       :key="item.id"
                       :label="item.portcd+'/'+item.portlocnnm"
                       :value="item.portcd"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="持箱人"
                      prop="cstCopercd">
          <el-select v-model="box.cstCopercd"
                     placeholder="请选择"
                     clearable
                     filterable>
            <el-option v-for="item in cstCopercdList"
                       :key="item.id"
                       :label="item.customerCode+'/'+item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="type=='I'"
                      label="箱控公司"
                      prop="cstOwnercd">
          <el-select v-model="box.cstOwnercd"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in cstOwnercdList"
                       :key="item.id"
                       :label="item.customerCode+'/'+item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内外贸"
                      prop="internalfg">
          <el-select v-model="box.internalfg"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in intradeList"
                       :key="item.lowValue"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="残损"
                      prop="brkdmgcd">
          <el-select v-model="box.brkdmgcd"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in brkdmgcdList"
                       :key="item.id"
                       :label="item.lowValue+'/'+item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="冷藏温度"
                      prop="settmpt">
          <el-input v-model="box.settmpt"
                    placeholder="请输入冷藏温度"
                    clearable></el-input>
        </el-form-item>
        <el-form-item v-if="type=='I'"
                      label="温度单位"
                      prop="tmptunit">
          <el-select v-model="box.tmptunit"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in tmptunitList"
                       :key="item.id"
                       :label="item.lowValue+'/'+item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="危险等级"
                      prop="dtpDnggcd">
          <el-select v-model="box.dtpDnggcd"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in dtpDnggcdList"
                       :key="item.id"
                       :label="item.dnggcd+'/'+item.dnggnm"
                       :value="item.dnggcd"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联合国编码"
                      prop="unno">
          <el-input v-model="box.unno"
                    placeholder="请输入联合国编码"
                    clearable></el-input>
        </el-form-item>
        <template v-if="type=='I'">
          <el-form-item label="前超 （米）"
                        prop="fovlength">
            <el-input v-model="box.fovlength"
                      placeholder="请输入前超 （米）"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="后超（米）"
                        prop="bovlength">
            <el-input v-model="box.bovlength"
                      placeholder="请输入后超（米）"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="左超（米）"
                        prop="lovwidth">
            <el-input v-model="box.lovwidth"
                      placeholder="请输入左超（米）"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="右超（米）"
                        prop="rovwidth">
            <el-input v-model="box.rovwidth"
                      placeholder="请输入右超（米）"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="超高（米）"
                        prop="ovheight">
            <el-input v-model="box.ovheight"
                      placeholder="请输入超高（米）"
                      clearable></el-input>
          </el-form-item>
        </template>
        <el-form-item label="缴费单位"
                      prop="chargeCstmcd">
          <el-select v-model="box.chargeCstmcd"
                     placeholder="请选择"
                     clearable
                     filterable>
            <el-option v-for="item in chargeCstmcdList"
                       :key="item.id"
                       :label="item.customerCode+'/'+item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="form2">
      <div class="title2">
        <div class="num">
          <div class="item"
               :class="index==i?'active':''"
               v-for="item,i in box.goods"
               :key="i">
            <div @click="changeGoods(i)">货信息{{i+1}}</div>
            <div @click="delGoods(i)">x</div>
          </div>

        </div>
        <div class="add"
             @click="addGoods">+</div>
      </div>
      <el-form ref="form"
               :model="box.goods[index]"
               inline
               label-width="90px"
               size="small"
               :rules="rules">
        <el-form-item label="提单号"
                      prop="billno">
          <el-input v-model="box.goods[index].billno"
                    placeholder="请输入提单号"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="货名"
                      prop="gname">
          <el-input v-model="box.goods[index].gname"
                    placeholder="请输入货名"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="件数"
                      prop="gcentpks">
          <el-input v-model="box.goods[index].gcentpks"
                    placeholder="请输入件数"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="体积（立方米）"
                      prop="gcentvol">
          <el-input v-model="box.goods[index].gcentvol"
                    placeholder="请输入体积（立方米）"
                    clearable></el-input>
        </el-form-item>
        <el-form-item v-if="type=='I'"
                      label="重量（吨）"
                      prop="gcentwg">
          <el-input v-model="box.goods[index].gcentwg"
                    placeholder="请输入体积（立方米）"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="货主"
                      prop="consignee">
          <el-select v-model="box.goods[index].consignee"
                     placeholder="请选择"
                     clearable
                     filterable>
            <el-option v-for="item in consigneeList"
                       :key="item.id"
                       :label="item.customerCode+'/'+item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="条款"
                      prop="deliverymd">
          <el-select v-model="box.goods[index].deliverymd"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in deliverymdList"
                       :key="item.id"
                       :label="item.lowValue"
                       :value="item.lowValue"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <!--  -->
      <div class="btn">
        <el-button type="primary"
                   size="small"
                   style="background-color:#043AA7"
                   :loading="butLoading"
                   @click.native="loadAndUploadCheck">提交</el-button>
        <el-button type="info"
                   plain
                   size="small"
                   @click.native="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addOn',
  components: {},
  props: {
    id: {
      default: '',
    },
    type: {
      default: 'E',
    },
  },
  data() {
    return {
      box: {
        cszCsizecd: '',
        ctypecd: '',
        rowNum: 1,
        goods: [{}],
      },
      index: 0,
      butLoading: false,
      rules: {
        cntrno: [{ required: true, message: '请输入箱号', trigger: 'blur' }],
        cszCsizecd: [
          { required: true, message: '请选择箱型尺寸', trigger: 'change' },
        ],
        cstatus: [{ required: true, message: '请选择空重', trigger: 'change' }],
        cweight: [
          { required: true, message: '请输入箱货总重（吨）', trigger: 'blur' },
        ],
        potUnldport: [
          { required: true, message: '请选择卸货港', trigger: 'change' },
        ],
        potDstnport: [
          { required: true, message: '请选择目的港', trigger: 'change' },
        ],
        cstCopercd: [
          { required: true, message: '请选择持箱人', trigger: 'change' },
        ],
        internalfg: [
          { required: true, message: '请选择内外贸', trigger: 'change' },
        ],
        chargeCstmcd: [
          { required: true, message: '请选择缴费单位', trigger: 'change' },
        ],
        billno: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
        gname: [{ required: true, message: '请输入货名', trigger: 'blur' }],
        consignee: [
          { required: true, message: '请选择货主', trigger: 'change' },
        ],
        deliverymd: [
          { required: true, message: '请选择条款', trigger: 'change' },
        ],
        cstOwnercd: [
          { required: true, message: '请选择箱控公司', trigger: 'change' },
        ],
        gcentwg: [{ required: true, message: '请输入重量（吨）', trigger: 'blur' }],
      },
      intradeList: [],
      cszCsizecdList: [],
      portList: [],
      cstCopercdList: [],
      chargeCstmcdList: [],
      consigneeList: [],
      deliverymdList: [],
      brkdmgcdList: [],
      dtpDnggcdList: [],
      cstOwnercdList: [],
      tmptunitList: [],
    }
  },

  methods: {
    cancel() {
      this.$emit('cancel')
    },

    refCode() {
      //内外贸
      this.$api
        .refCode({ domain: 'INTERNALFG_IM' })
        .then((res) => {
          this.intradeList = res.data.data
        })
        .catch((err) => {})
      //残损
      this.$api
        .refCode({ domain: 'BRKDMGCD' })
        .then((res) => {
          this.brkdmgcdList = res.data.data
        })
        .catch((err) => {})
      //条款
      this.$api
        .refCode({ domain: 'DELIVERYMD' })
        .then((res) => {
          this.deliverymdList = res.data.data
        })
        .catch((err) => {})
      //温度单位
      this.$api
        .refCode({ domain: 'TMPT_UNIT' })
        .then((res) => {
          this.tmptunitList = res.data.data
        })
        .catch((err) => {})
    },
    //港口
    port() {
      this.$api.port().then((res) => {
        this.portList = res.data.data
      })
    },
    //箱型尺寸
    containerTypeSizeInfo() {
      this.$api.containerTypeSizeInfo().then((res) => {
        this.cszCsizecdList = res.data.data
      })
    },
    changeCszCsizecd(e) {
      console.log(e)
      this.box.cszCsizecd = e[1]
      this.box.ctypecd = e[0]
    },
    customerByType() {
      //持箱人
      this.$api
        .customerByType({ tenantTypeName: '持箱人' })
        .then((res) => {
          this.cstCopercdList = res.data.data
        })
        .catch((err) => {})
      //货主
      this.$api
        .customerByType({ tenantTypeName: '货主' })
        .then((res) => {
          this.consigneeList = res.data.data
        })
        .catch((err) => {})
      //箱控公司
      this.$api
        .customerByType({ tenantTypeName: '箱控公司' })
        .then((res) => {
          this.cstOwnercdList = res.data.data
        })
        .catch((err) => {})
    },
    //危险等级
    dangerCode() {
      this.$api.dangerCode().then((res) => {
        this.dtpDnggcdList = res.data.data
      })
    },
    //缴费单位
    customer() {
      this.$api.customer().then((res) => {
        this.chargeCstmcdList = res.data.data
      })
    },
    //校验
    loadAndUploadCheck() {
      let box = []
      this.box.goods.map((item, index) => {
        item.rowNum = index
        box.push({ ...this.box, ...item })
      })
      box.map((item) => {
        if (item.internalfg == 'N') {
          item.internalfg = '外贸'
        } else if (item.internalfg == 'Y') {
          item.internalfg = '内贸'
        }
      })
      let params = {
        boxes: box,
        opType: 'create',
        scdId: this.id, //航次id
        voyType: this.type, //E或者I
      }

      this.butLoading = true
      this.$api
        .loadAndUploadCheck(params)
        .then((res) => {
          if (res.data == 'success') {
            this.$message.success('校验成功')
            this.$emit('success', { ...this.box, ...this.box.goods[0] })
          } else {
            this.$message.error(res.data)
          }
          this.butLoading = false
        })
        .catch((err) => {})
    },
    addGoods() {
      this.box.goods.push({})
      this.index++
    },
    delGoods(index) {
      if (this.box.goods.length > 1) {
        this.box.goods.splice(index, 1)
      } else {
        this.$message.warning('最后一条不可删除')
      }
    },
    changeGoods(index) {
      this.index = index
    },
    //编辑进来查询详情
    loadAndUploadFindOne(plcId) {
      this.$api.loadAndUploadFindOne({ plcId }).then((res) => {
        this.box = res.data
        console.log(this.box)
      })
    },
  },

  computed: {
    sizeType: {
      get() {
        if (this.box.ctypecd)
          return this.box.ctypecd + '/' + this.box.cszCsizecd
      },
      set(value) {},
    },
  },

  mounted() {
    this.refCode()
    this.port()
    this.containerTypeSizeInfo()
    this.customerByType()
    this.dangerCode()
    this.customer()
  },
}
</script>
<style lang='scss' scoped>
.form1 {
  .title1 {
    margin-bottom: 10px;
    padding-left: 15px;
    height: 32px;
    background: #f8f8f8;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #043aa7;
    display: flex;
    align-items: center;
    div {
      display: flex;
      align-items: center;
      border-left: 2px solid #2368d2;
      padding-left: 6px;
      height: 10px;
    }
  }
}
.form2 {
  .title2 {
    margin-bottom: 10px;
    padding-left: 15px;
    height: 32px;
    background: #f8f8f8;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #043aa7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .num {
      display: flex;
      .item {
        div:last-child:hover {
        }
      }
      div {
        display: flex;
        align-items: center;
        height: 20px;
        line-height: 20px;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 0px;
        padding: 0 4px;
      }
      .active {
        background: #ecf4ff;
      }
    }

    .add {
      border: 1px solid #1a6de8;
      border-radius: 2px;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
.btn {
  text-align: center;
  .el-button {
    width: 80px;
  }
}
</style>